<!-- 开支编辑弹窗 -->
<template>
  <ele-page>
    <ele-card>
      <template #header> 筛选 </template>

      <el-form label-width="80px" @keyup.enter="fetchData" inline>
        <el-form-item label="所属团队">
          <tenant-radio v-model="form.tenant_id" />
        </el-form-item>
        <br />
        <!-- <el-form-item label="归属月份">
          <el-date-picker
            v-model="form.belongs_date"
            class="filter-item"
            type="month"
            value-format="YYYY-MM"
            style="width: 200px"
            @change="fetchData"
          />
        </el-form-item> -->
        <el-form-item label="所属年份">
          <el-date-picker
            v-model="form.year"
            type="year"
            value-format="YYYY"
            placeholder="选择年"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item label="所属月份">
          <el-select
            v-model="form.months"
            multiple
            placeholder="不选为全年"
            style="width: 300px"
          >
            <el-option
              v-for="month in monthOptions"
              :key="month.value"
              :label="month.label"
              :value="month.value"
            />
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label="企业名称" prop="company_name">
          <el-input clearable v-model="form.company" style="width: 200px" />
        </el-form-item>
        <el-form-item label="岗位" prop="position_id">
          <el-input clearable v-model="form.position" style="width: 200px" />
        </el-form-item>

        <el-form-item label="">
          <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
      </el-form>
    </ele-card>

    <!-- <ele-card v-for="item in list" :key="item.title"> -->
    <ele-card>
      <!-- <template #header> {{ item.title }} </template> -->
      <el-table
        :data="list"
        style="width: 100%"
        border
        stripe
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <!-- <el-table-column type="index" label="" width="60" /> -->
        <el-table-column label="项目名称" prop="company" width="300" />
        <el-table-column label="垫付金额" width="150">
          <template #default="{ row }">
            <span
              class="pointer blue"
              v-if="row.company_id > 0"
              @click="openSalary(row)"
              >{{ row.paid }}</span
            >
            <span v-else>{{ row.paid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="应回金额" prop="company_pay" width="150">
          <template #default="{ row }">
            <span
              class="pointer blue"
              v-if="row.company_id > 0"
              @click="openSalaryTable(row)"
              >{{ row.company_pay }}</span
            >
            <span v-else>{{ row.company_pay }}</span>
          </template>
        </el-table-column>
        <el-table-column label="其他成本" width="150">
          <template #default="{ row }">
            <span
              class="pointer blue"
              v-if="row.company_id > 0"
              @click="openIncomeExpense(row)"
              >{{ row.cost }}</span
            >
            <span v-else>{{ row.cost }}</span>
          </template>
        </el-table-column>
        <el-table-column label="利润" prop="profit" />
        <el-table-column label="开票金额">
          <template #default="{ row }">
            <span
              class="pointer blue"
              v-if="row.company_id > 0"
              @click="openInvoice(row)"
              >{{ row.invoice }}</span
            >
            <span v-else>{{ row.invoice }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际回款">
          <template #default="{ row }">
            <span
              class="pointer blue"
              v-if="row.company_id > 0"
              @click="openPaid(row)"
              >{{ row.company_paid }}</span
            >
            <span v-else>{{ row.company_paid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="实际利润" prop="actual_profit" />
      </el-table>
    </ele-card>

    <!-- 工资详情 -->
    <Salary
      v-model="showSalary"
      :data="current"
      :belongs-date="form.belongs_date"
    />
    <!-- 成本详情 -->
    <IncomeExpense
      v-model="showIncomeExpense"
      :data="current"
      :belongs-date="form.belongs_date"
    />
    <!-- 回款详情 -->
    <Paid
      v-model="showPaid"
      :data="current"
      :belongs-date="form.belongs_date"
      @close="fetchData"
    />
    <!-- 开票详情 -->
    <Invoice
      v-model="showInvoice"
      :data="current"
      :belongs-date="form.belongs_date"
      @close="fetchData"
    />
  </ele-page>
</template>

<script setup>
  import { ref, onMounted, watch } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { getCompanyProfit } from '@/api/company';
  import Salary from './components/salary.vue';
  import IncomeExpense from './components/cost.vue';
  import Paid from './components/paid.vue';
  import Invoice from './components/invoice.vue';
  import { useRouter } from 'vue-router';
  import TenantRadio from '@/components/Tenant/radio-no-all.vue';

  defineOptions({ name: 'CompanyReport' });

  const { push } = useRouter();
  const list = ref([]);

  onMounted(() => {
    setCurrentMonth();
    // fetchData();
  });

  const monthOptions = Array.from({ length: 12 }, (_, index) => {
    const value = (index + 1).toString().padStart(2, '0');
    return {
      label: `${value} 月`,
      value: value
    };
  });

  const setCurrentMonth = () => {
    const now = new Date();
    const year = now.getFullYear();
    // const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
    // let selectedMonth = `${year}-${month}`;
    // form.belongs_date = selectedMonth;
    form.value.year = `${year}`;
  };
  const fetchData = () => {
    const loading = EleMessage.loading({ message: '正在加载中..', mask: true });
    var requestData = Object.assign({}, form.value);
    getCompanyProfit(requestData)
      .then((res) => {
        loading.close();
        // total.value = res.total;
        list.value = res;
      })
      .catch((e) => {
        loading.close();
        console.log(e);
      });
  };

  const form = ref({
    tenant_id: '',
    company: '',
    position: '',
    belongs_date: '',
    year: '',
    months: ''
  });

  const current = ref({});
  const showSalary = ref(false);
  const openSalary = (row) => {
    current.value = row;
    form.value.belongs_date = row.belongs_date;
    showSalary.value = true;
  };

  const openSalaryTable = (row) => {
    push({
      path: '/company/report/table',
      query: {
        id: row.company_id,
        belongs_date: row.belongs_date,
        company: row.company
      }
      // 路由用 query 传参数是以 ? 和 & 拼接在 url 后面的形式
      // 如果用 params 传参数路由注册时必须申明了 /:xxx 形式的才能接收到
    });
  };
  const showPaid = ref(false);
  const openPaid = (row) => {
    current.value = row;
    form.value.belongs_date = row.belongs_date;
    showPaid.value = true;
  };
  const showInvoice = ref(false);
  const openInvoice = (row) => {
    current.value = row;
    form.value.belongs_date = row.belongs_date;
    showInvoice.value = true;
  };

  const showIncomeExpense = ref(false);
  const openIncomeExpense = (row) => {
    current.value = row;
    form.value.belongs_date = row.belongs_date;
    showIncomeExpense.value = true;
  };
  watch(
    () => form.value.tenant_id,
    (val) => {
      if (val) {
        fetchData(); // tenant_id 设置后再请求
      }
    }
  );
</script>

<style lang="scss" scoped>
  .panel-group {
    margin-top: 18px;

    .card-panel-col {
      margin-bottom: 32px;
    }

    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.05);
      border-radius: 10px;

      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        .icon-people {
          background: #40c9c6;
        }

        .icon-message {
          background: #36a3f7;
        }

        .icon-money {
          background: #f4516c;
        }

        .icon-shopping {
          background: #34bfa3;
        }
      }

      .icon-people {
        color: #40c9c6;
      }

      .icon-message {
        color: #36a3f7;
      }

      .icon-money {
        color: #f4516c;
      }

      .icon-shopping {
        color: #34bfa3;
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;

        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  @media (max-width: 550px) {
    .card-panel-description {
      display: none;
    }

    .card-panel-icon-wrapper {
      float: none !important;
      width: 100%;
      height: 100%;
      margin: 0 !important;

      .svg-icon {
        display: block;
        margin: 14px auto !important;
        float: none !important;
      }
    }
  }
  .val {
    font-size: 20px;
  }
</style>
